<template>
  <div class="main_login">
    <img :src="img">
    <span class="log">转日莲，更无柳絮因风起，唯有葵花向日倾</span>
    <div class="login_container">
      <div class="login_logo">
        <img src="../../assets/image/logo@2x.png" alt="">
      </div>
      <div class="login_box">
        <el-form ref="login" :model="userData" :rules="rules">
          <el-form-item prop="username">
            <el-input class="username"
                      placeholder="用户名"
                      prefix-icon="el-icon-user"
                      v-model="userData.username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input class="password"
                      placeholder="密码"
                      prefix-icon="el-icon-film"
                      type="password"
                      v-model="userData.password">
            </el-input>
          </el-form-item>
          <el-form-item prop="verification_code">
            <div class="combine">
              <el-input v-model="userData.verification_code" placeholder="验证码" class="check"
                        prefix-icon="el-icon-document-checked"></el-input>
              <img :src="imgSrc" class="register_code" alt="" @click="change_verification_code">
            </div>
          </el-form-item>
          <el-button type="primary" class="submit" @click="submitForm('login')">登录</el-button>
        </el-form>
      </div>
      <div class="login_tail_container">
        <div class="login_tail">
          <span @click="goRetrieve" class="forget">忘记密码</span>
          <span @click="goRegister" class="re_back">注册新用户</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginBox",
  data() {
    return {
      userData: {
        username: '',
        password: '',
        verification_code: '',
        img_code: ''
      },
      img: "",
      ruleForm: {
        username: '',
        password: '',
        verification_code: '',

      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 8, max: 13, message: '长度在 8 到 13 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 13, message: '长度在 8 到 20 个字符', trigger: 'blur'}
        ],
        verification_code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
      },
      imgSrc: "",
    }
  },
  created() {
    let that = this
    this.$axios.get("http://localhost:80/webBasic/getCode", {
      responseType: 'blob',
    }).then(res => {
      that.userData.img_code = res.headers.imgcode
      that.imgSrc = window.URL.createObjectURL(res.data)
    })
  },
  methods: {
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("http://localhost:80/webBasic/login", that.userData).then(res => {
            if (res.data.code == 200) {
              that.$axios.get("http://localhost:80/webBasic/getNickname?usernumber="+that.userData.username).then(res2 => {
                that.$router.push("/home")
                that.$message('登录成功');
                that.$store.commit("saveUsernumber", that.userData.username)
                that.$store.commit("saveNickname", res2.data)
                console.log(res2)
                console.log(that.$store.state.usernumber)
                console.log(that.$store.state.nickname)
              })
            } else {
              this.$message.error('登录失败，请检查用户名密码是否驶入正确');
            }
          })

        } else {
          this.$message.error('请正确输入所有信息哦');
          return false;
        }
      });
    },
    change_verification_code() {
      let that = this
      this.$axios.get("http://localhost:80/webBasic/getCode", {
        responseType: 'blob',
      }).then(res => {
        that.userData.img_code = res.headers.imgcode
        that.imgSrc = window.URL.createObjectURL(res.data)
      })
    },
    goRetrieve() {
      this.$router.push("/retrieve_number")
    },
    goRegister() {
      this.$router.push("/register")
    }
  },
}
</script>

<style scoped>
.log {
  position: absolute;
  left: 50%;
  top: 1%;
  transform: translate(-50%);
  color: #606266;
  text-align: center;
  font-size: 12px;
}


.main_login {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}

.login_container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0f2f5;

}

.login_logo img {
  width: 240px;
}


.login_box {
  box-shadow: 10px 10px 30px gray;
  height: 300px;
  width: 280px;
  background-color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
}

.username {
  box-sizing: border-box;
  margin-top: 20px;
}

.password {
  background-color: #f5f7fa;
}

.combine {
  display: flex;
  box-sizing: border-box;
}

.combine img {
  height: 38px;
  background-color: white;
}

.check {
  background-color: #f5f7fa;
  flex: 8;
}

.password {
  background-color: #f5f7fa;
}

.register_code {
  background-color: #f5f7fa;
  flex: 4;
}

.re_back {
  width: 100%;
}

.login_tail {
  display: flex;
  margin-top: 20px;
}

.forget {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 15px;
  font-weight: bold;
  flex: 6;
  transition: font-size 1s;
}

.re_back {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 15px;
  font-weight: bold;
  flex: 6;
  transition: font-size 1s;
}

.forget:hover, .re_back:hover {
  font-size: 17px;
  cursor: default;
}

.login_tail_container {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.submit {
  width: 100%;
}
</style>
